<template>
  <div class="app-container">
    <el-button type="primary" @click.native="addDialog" icon="el-icon-add">新建</el-button>
    <tdialog :itemDialog="itemDialog" v-on:taction="taction"></tdialog>
  <tree :treeData="treeData"></tree>
    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @row-click="updDialog">
      <el-table-column align="center" label='ID' width="95">
        <template scope="scope">
          {{scope.$index}}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template scope="scope">
          {{scope.row.title}}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template scope="scope">
          <span>{{scope.row.author}}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" width="110" align="center">
        <template scope="scope">
          {{scope.row.pageviews}}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.display_time | timeFilter }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div>{{listQuery.page}}</div>
    <pagination :listQuery="listQuery"></pagination>
  </div>
</template>

<script>
/**
// 添加数据
this.list.unshift(this.temp);
// 删除数据
const index = this.list.indexOf(row); //找到要删除数据在list中的位置
this.list.splice(index, 1); //通过splice 删除数据

// 修改数据
const index = this.list.indexOf(row); //找到修改的数据在list中的位置
this.list.splice(index, 1,this.updatedData); //通过splice 替换数据 触发视图更新
// 赋值对象是一个obj
this.objData=Object.assign({}, row) //这样就不会共用同一个对象

// 数组我们也有一个巧妙的防范
newArray = oldArray.slice(); //slice会clone返回一个新数组
 */
import { getList, saveTab, updTab } from '@/api/table'
import { mapGetters } from 'vuex'
import pagination from '@/components/pagination'
import tree from '@/components/tree'
import { formatTime } from '@/utils'
import tdialog from './dialog'
import { Message, MessageBox } from 'element-ui'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      // 分页对象
      listQuery: {
        page: 1,
        limit: 20,
        total: 0,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      formatTime: formatTime,
      // 弹层对象
      itemDialog: {
        action: 'add',
        avliable: false,
        item: {
          id: 1,
          name: 'name'
        }
      }
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    // 时间过滤
    timeFilter(time) {
      return formatTime(time, '{y}-{m}-{d}')
    }
  },
  // 组件创建
  created() {
    this.fetchData()
    // this.prints()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.items
        this.listLoading = false
        this.listQuery.total = response.data.items.length
      })
    },
    // 新建
    addDialog() {
      // 显示dialog
      this.itemDialog.avliable = true
      //
      this.itemDialog.action = 'add'
      console.log(this.itemDialog.action + `===========` + this.itemDialog.avliable)
    },
    updDialog(row, event, column) {
      // 显示dialog
      console.log(row + `===========` + column)
      this.itemDialog.avliable = true
      this.itemDialog.action = 'upd'
      this.itemDialog.item = row
    },
    taction(target, action, item) {
      dialog_action[action](item)
    }
  },
  components: { pagination, tree, tdialog },
  computed: {
    ...mapGetters([
      'permission_routers'
    ])
  },
  watch: {
    listQuery: {
      // 监听 listQuery 对象属性的变化
      handler: function(value) {
       // console.log(this.listQuery.page)
        this.fetchData()
      },
      // 全部的属性
      deep: true
    }
  }
}
const dialog_action = {
  'add': function(item){
     console.log(`---------------------------add`)
      this.listLoading = true
      saveTab(item).then(response => {
        this.listLoading = false
        Message({
          message: response.msg,
          type: 'success',
          duration: 3 * 1000
        })
      })
  },
  'upd': function() {
    console.log(`---------------------------upd`)
      this.listLoading = true
      updTab().then(response => {
        this.listLoading = false
        Message({
          message: response.msg,
          type: 'success',
          duration: 3 * 1000
        })
      })
  }
}
</script>
